<template>
  <div class="user-index">
    <div>
      <quick />
      <div class="box-wrap">
        <total ref="total" />
        <cloud />
        <overview ref="overview" />
        <maintenance />
        <money ref="money"/>
        <event />
        <distri ref="distri"/>
        <!-- <el-image src="/img/chart-1.png" fit="cover"></el-image> -->
        <el-image src="/img/chart-2.png" fit="cover"></el-image>
        <distribution />
        <!-- <el-image src="/img/chart-3.png" fit="cover"></el-image> -->
        <el-image src="/img/chart-4.png" fit="cover"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import quick from "./components/quick";
import total from "./components/total";
import cloud from "./components/cloud";
import overview from "./components/overview";
import maintenance from "./components/maintenance";
import money from "./components/money";
import distri from "./components/distri";
import distribution from "./components/distribution";
import event from "./components/event";

import request from "@/utils/request";
export default {
  name: "userIndex",
  components: {
    quick,
    total,
    cloud,
    overview,
    maintenance,
    money,
    distri,
    distribution,
    event,
  },
  data() {
    return {
      dataObj: {},
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.getResources();
    this.chargeTrend();
  },
  methods: {
    getResources() {
      request({
        url: "/homepage/user/resources",
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.dataObj = res.data;
          this.$refs.overview.init(res.data);
          this.$refs.total.init(res.data);
        }
      });
    },
    chargeTrend() {
      request({
        url: "/homepage/user/chargeTrend",
        method: "get",
      }).then((res) => {
        if (res.success) {
          // this.dataObj = res.data;
          this.$refs.money.line(res);
          this.$refs.distri.init(res);
          // this.$refs.total.init(res.data);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user-index {
  background: rgb(236, 239, 252);
  display: flex;
  justify-content: center;
  height: calc(100vh - 70px);
  min-width: 1440px;
  overflow-y: auto;

  .box-wrap {
    min-width: 1440px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 60px;

    > div {
      margin: 20px 10px 0;
    }

    .el-image {
      width: 700px;
      height: 284px;
    }
  }
}
</style>
